<%--User: 24390 Date: 2021/1/18 Time: 17:12--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" isErrorPage="true" %>
<html>
<%--头部文件--%>
<%@include file="/WEB-INF/include-head.jsp" %>
<link rel="stylesheet" href="/css/pagination.css">
<script src="/jquery/jquery.pagination.js"></script>
<script src="/tongchou/my-role.js"></script>
<script>
    $(function () {
        window.pageNum = 1;
        window.pageSize = 5;
        window.keyword = "";

        generatePage(); // 执行分页

        // 给查询按钮绑定点击事件
        $("#searchBtn").click(function () {
            window.keyword = $("#keywordInput").val(); // 获取关键词数据赋值给keyword这个全局变量
            generatePage();// 执行分页函数刷新页面
        });

        // 给新增按钮绑定点击事件，弹出模态框
        $("#showAddModalBtn").click(function () {
            $("#addModal").modal("show");
        });

        $("#saveBtn").click(function () {
            var roleName = $.trim($("#addModal [name=roleName]").val());// 获取文本框中输入的信息
            $.ajax({
                url:"role/save.json",
                type:"post",
                data:{
                    "name":roleName
                },
                dataType:"json",
                success:function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("保存角色成功");
                        window.pageNum = 999;
                        generatePage(); // 将页面定位到最后一页
                    }
                    if (result == "FAILED"){
                        layer.msg("保存失败");
                    }
                },
                error:function (response) {
                    layer.msg(response.status+" "+response.statusText);
                }
            });
            $("#addModal").modal("hide"); // 在AJAX请求之后关闭模态框

            $("#addModal [name=roleName]").val(""); // 清理模态框
        });
        // 首先找到所有动态生成的元素所附着的 静态 父类元素
        // on函数的第一个参数是 事件类型，第二个参数是 找到真正绑定事件的元素选择器，第三个参数是响应函数
        $("#role-page-body").on("click",".pencilBtn",function () {
            $("#editModal").modal("show");
            var roleName = $(this).parent().prev().text();
            // 为了让执行更新的按钮能够获取到roleId的值，把它放在全局变量中
            window.roleId = this.id;
            // 回显
            $("#editModal [name=roleName]").val(roleName);
        });

        $("#updateRoleBtn").click(function () {
            var NewroleName = $("#editModal [name=roleName]").val();// 从文本框中获取用户更改后的角色名称
            $.ajax({
                url:"role/update.json",
                type:"post",
                data:{
                    "id":window.roleId,
                    "name":NewroleName
                },
                dataType: "json",
                success:function (response) {
                    layer.msg("更改成功");
                    generatePage();
                },
                error:function (response) {
                    layer.msg("更改失败:"+response.statusText)

                }
            });
            // 最后都关闭模态框
            $("#editModal").modal("hide");
        });

        $("#removeRoleBtn").click(function () {
            var requestBody = JSON.stringify(window.roleIdArray); // 从全局变量范围获取到角色id数组，转换为json字符串
            $.ajax({
                url:"/role/delete/by/role/id/array.json",
                type:"post",
                data:requestBody,
                contentType:"application/json;charset=UTF-8",
                dataType:"json",
                success:function (response) {
                    var result = response.result;
                    if (result == "SUCCESS"){
                        layer.msg("删除成功")
                        generatePage();
                    }
                    if (result == "FAILED"){
                        layer.msg("删除失败:"+response.message)
                    }
                },
                error:function (response) {
                    layer.msg(response.status+" "+response.statusText);

                }
            });
            $("#confirmModal").modal("hide");
        });

        // 点击动态生成的单个删除按钮
        $("#role-page-body").on("click",".removeBtn",function () {
            // 从当前按钮出发获取角色的名称
            var roleName = $(this).parent().prev().text();
            // 创建role对象存入数组
            var roleArray = [{
                roleId:this.id,
                roleName:roleName
            }]
            showConfirmModal(roleArray);
        });

        // 全选/全不选的点击事件
        $("#summaryBox").click(function () {
            var currentStatus = this.checked;// 获取当前多选框自身的状态
            // 用当前多选框去设置其他多选框
            $(".itemBox").prop("checked",currentStatus);
        });

        // 全选/全不选反向操作
        $("#role-page-body").on("click",".itemBox",function () {
            // 获取当前已经选中的itemBox数量
            var checkedBoxCount = $(".itemBox:checked").length;
            var totalBoxCount = $(".itemBox").length;
            $("#summaryBox").prop("checked",checkedBoxCount==totalBoxCount)
        });

        $("#batchRemoveBtn").click(function () {
            var roleArray = []; // 创建数组对象，用来存放

            // 遍历当前正选中的多选框
            $(".itemBox:checked").each(function () {
                // 使用this引用
                var roleId = this.id;
                // 通过dom操作获取角色名称
                var roleName = $(this).parent().next().text();
                roleArray.push({
                    roleId:roleId,
                    roleName:roleName
                });
            });
            if (roleArray.length == 0 ){
                layer.msg("请至少选择一个执行批量删除");
                return;
            }

            showConfirmModal(roleArray);
        });
    });
</script>
<body>

<%--顶部导航文件--%>
<%@include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%--        sidebar--%>
        <%@include file="/WEB-INF/include-sidebar.jsp" %>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                    </div>
                    <div class="panel-body">
                        <form class="form-inline" role="form" style="float:left;">
                            <div class="form-group has-feedback">
                                <div class="input-group">
                                    <div class="input-group-addon">查询条件</div>
                                    <input id="keywordInput" class="form-control has-success" type="text" placeholder="请输入查询条件">
                                </div>
                            </div>
                            <button id="searchBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
                        </form>
                        <button id="batchRemoveBtn" type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                        <button id="showAddModalBtn" type="button" class="btn btn-primary" style="float:right;"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                        <br>
                        <hr style="clear:both;">
                        <div class="table-responsive">
                            <table class="table  table-bordered">
                                <thead>
                                <tr>
                                    <th width="30">#</th>
                                    <th width="30"><input id="summaryBox" type="checkbox"></th>
                                    <th>名称</th>
                                    <th width="100">操作</th>
                                </tr>
                                </thead>
                                <tbody id="role-page-body">
<%--                                <tr>--%>
<%--                                    <td>1</td>--%>
<%--                                    <td><input type="checkbox"></td>--%>
<%--                                    <td>PM - 项目经理</td>--%>
<%--                                    <td>--%>
<%--                                        <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>--%>
<%--                                        <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>--%>
<%--                                        <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>--%>
<%--                                    </td>--%>
<%--                                </tr>--%>

                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="6" align="center">
                                        <div id="paginationId" class="pagination"></div>
                                    </td>
                                </tr>

                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

<%@include file="/WEB-INF/modal-role-add.jsp"%>
<%@include file="/WEB-INF/modal-role-edit.jsp"%>
<%@include file="/WEB-INF/modal-role-confirm.jsp"%>
</body>
</html>


